<template>
	<view>
		<view class="ljs-tree-select-treeOne" v-for="(item, i) in data" :key="i">
			<view class="ljs-tree-select-treeOne-one" :class="{ 
				active: chooseMode === 'line' && item.choose,
				disabled: item.disabled
			}"
			@click.stop="select(item)">
				<template v-if="!lazy">
					<template v-if="(item[props.children] !== undefined && item[props.children].length > 0)">
						<template v-if="!item.openTag">
							<image class="ljs-tree-select-treeOne-jt" @click.stop="open(item)" src="./images/ico_jt_r.png"></image>
						</template>
						<template v-else>
							<image class="ljs-tree-select-treeOne-jt" @click.stop="open(item)" src="./images/ico_jt_b.png"></image>
						</template>
					</template>
					<template v-else>
						<image class="ljs-tree-select-treeOne-jt"></image>
					</template>
				</template>
				<template v-else>
					<template v-if="(item[props.children] !== undefined && item[props.children].length > 0)">
						<template v-if="!item.openTag">
							<image class="ljs-tree-select-treeOne-jt" @click.stop="open(item)" src="./images/ico_jt_r.png"></image>
						</template>
						<template v-else>
							<image class="ljs-tree-select-treeOne-jt" @click.stop="open(item)" src="./images/ico_jt_b.png"></image>
						</template>
					</template>
					<template v-else>
						<template v-if="item[props.lazyTag]">
							<image class="ljs-tree-select-treeOne-jt" @click.stop="open(item)" src="./images/ico_loading.png"></image>
						</template>
						<template v-else>
							<image class="ljs-tree-select-treeOne-jt"></image>
						</template>
					</template>
				</template>
				<image v-if="chooseMode === 'ico' && item.choose" class="ljs-tree-select-treeOne-chooseTag" src="./images/ico_choose.png"></image>
				<text class="ljs-tree-select-treeOne-label" :class="{allRow : !allRow}" :style="{
					width: 'calc(100% - 60rpx '+(chooseMode === 'ico' && item.choose ? ' - 40rpx' : '')+' '+(item.disabled ? ' - 60rpx' : '')+')',
					'color': chooseMode === 'line' && item.choose ? lineModeColor : '',
					'border-bottom': chooseMode === 'line' && item.choose ? '4rpx solid '+lineModeColor : '',
					'-webkit-line-clamp': allRow ? 1 : showRowNum
				}">{{item[props.label]}}</text>
			</view>
			<view class="ljs-tree-select-treeOne-children" v-if="item.openTag && item[props.children] !== undefined">
				<treeSelectOne
					:data="item[props.children]"
					@getChooseValue="getValue"
					@openTagChange="openTagChange"
					@lazyChange="lazyChange"></treeSelectOne>
			</view>
		</view>
	</view>
</template>

<script>
	// #ifdef MP-WEIXIN
	import treeSelectOne from "./treeSelectOne.vue"
	// #endif
	
	export default {
		name: "treeSelectOne",
		data() {
			return {}
		},
		// #ifdef MP-WEIXIN
		components: {
			'treeSelectOne': treeSelectOne
		},
		// #endif
		inject: [
			'allData',
			'checkStrictly',
			'multiple',
			'showAllLevels',
			'allRow',
			'showRowNum',
			'chooseMode',
			'lineModeColor',
			'icoModeImage',
			'props',
			'lazy',
			'load',
		],
		props: {
			data: Array,
		},
		methods: {
			// 获取
			getValue(ids, oldChoose) {
				// 错误数据
				// ids.push(this.chooseValue.id);
				this.$emit("getChooseValue", ids, oldChoose); // 继续向上传递
			},
			openTagChange(ids, openTag) {
				this.$emit("openTagChange", ids, openTag);
			},
			// 懒加载数据变化 - 提示父组件
			lazyChange(ids, children) {
				this.$emit("lazyChange", ids, children);
			},
			// 打开下级菜单
			open(item) {
				const ids = this.findFid(this.allData, item[this.props.id], []);
				// 懒加载
				if (this.lazy && item[this.props.lazyTag] && (item[this.props.children] === undefined || item[this.props.children] === null || item[this.props.children].length === 0)) {
					const children = this.load(item);
					if (Object.prototype.toString.call(children) === '[object Array]') {
						this.$emit("lazyChange", ids, children);
					} else {
						console.error(`请检查load方法，该方法需要return一个节点数据。`);
					}
				}
				// 推完整路径，解决小程序，展开后选中父节点自动收起问题。
				this.$emit("openTagChange", ids, !item.openTag);
			},
			// 点击选中一级
			select(item) {
				if (item.disabled) {
					uni.showToast({
						title: '不可选择',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				let tag = false;
				// 是否严格的遵守父子节点不互相关联
				if (this.checkStrictly) {
					tag = true;
				} else {
					if (!item[this.props.children] || item[this.props.children].length === 0) {
						tag = true;
					}
				}
				// tag为true,可以选择,false不可选择
				if (tag) {
					const ids = this.findFid(this.allData, item[this.props.id], []);
					// 是否返回完整路径数据集
					if (this.showAllLevels) {
						// 推完整路径
						this.$emit("getChooseValue", ids, item.choose);
					} else {
						// 只推当前层
						this.$emit("getChooseValue", [item[this.props.id]], item.choose);
					}
				}
			},
			// 通过选中的对象id获取其整个id的数据集，包括其所有的父级对象的id
			findFid(data, id, ids) {
				const nums = data.length;
				for (let i = 0; i < nums; i++) {
					if (data[i][this.props.id] === id) {
						ids.unshift(data[i][this.props.id]);
						return ids;
					}
					if (data[i][this.props.children] !== undefined) {
						ids = this.findFid(data[i][this.props.children], id, ids);
						if (ids.length > 0 && ids[ids.length - 1] === id) {
							ids.unshift(data[i][this.props.id]);
							return ids;
						}
					}
				}
				return ids;
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "./treeSelectOne.scss"
</style>